<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Chapter 3: Whoever He Is</title>

<link rel="shortcut icon" href="images/2reading.gif">
<link href="foti.css" rel="stylesheet" type="text/css">

<style type="text/css">
#canvas {
	margin: 10px auto 0 auto;
	border: 5px double #aa9e8c;
}

#bg, #char {display:none;}

</style>

<script type="text/javascript">
var vc, vctx, vi1, bgr;
	function init(){
		vc = document.getElementById("canvas");
		vctx = vc.getContext("2d");
		bgr = document.getElementById("bg");
		vctx.drawImage(bgr,0,0,800,600);
		vi1 = document.getElementById("char");
		setInterval("animation()",1100);		
	}
	
	var dax=0; counter=0;
	function animation(){
		if(counter >= 7) counter = 0; else counter++;
		vctx.drawImage(bgr,0,0,800,600);
		vctx.drawImage(vi1,dax,0,800,600,0,0,800,600);
		dax=800*counter;

	}
</script>

</head>
<body onload="init()">

	<h1>Figment of the Imagination</h1>
	<h2>Chapter 3: Whoever He Is</h2>
	<h2>Scene 3: Crowd Starts To Jeer</h2>


<center><img src="images/line divider.png" width=800 style="opacity: .7;"></center>

<div id="content">

<center><canvas id="canvas" width=800 height=600></canvas></center>
<img id="bg" src="images/ch3/entrance.png" width=800 height=600>
<img id="char" src="images/ch3/run.png">

<center><img src="images/photo.png" width=800 style="margin:-4px 0 0 0;"></center>

<div id="scenetext">
<p>
She escaped the embarrassing scene with the man she is besotted with. Ada was furious. To her surprise, 
everyone was suddenly there, seeing her unpleasant face. The whole crowd bursted to laughter. Then 
something loud filled the corridors, like a bomb ticking! Through the crowd, Ada frantically dashed to 
save herself from humiliation and explosion. "I'm gonna die in this appalling face." <br><br>
	
It's 7:23 A.M.

</p>

<center><img src="images/line divider.png" width=800 style="opacity: .7;"></center>
	
</div>

<div align="center" style="padding-bottom: 30px;">
<a href="Chapter3Scene2.jsp" title="Pimple Problems"><button id="button">BACK</button></a>
<a href="tableofcontent.jsp" title="Back to Table of Contents"><button id="button2">TABLE OF CONTENTS</button></a>
<a href="Chapter3Scene4.jsp" title="Breakfast"><button id="button">NEXT</button></a>
</div>

</div>


</body>
</html>

